import { h } from 'vue';
import { NTag } from 'naive-ui';
import { BasicColumn } from '@/components/Table';

export const columns: BasicColumn[] = [
  {
    type: 'selection',
    width: 20,
    align: 'center',
  },
  {
    title: 'ID',
    key: 'id',
    width: 60,
    align: 'center',
    sorter: (row1, row2) => row1.id - row2.id,
  },
  {
    title: '标题',
    key: 'title',
    width: 300,
    align: 'center',
  },
  {
    title: '分类',
    key: 'categories',
    width: 300,
    align: 'center',
    render(row) {
      return row.categories.map((category) => {
        return h(
          NTag,
          {
            type: 'info',
            style: {
              marginRight: '6px',
            },
          },
          {
            default: () => category,
          },
        );
      });
    },
  },
  {
    title: '发布',
    key: 'is_published',
    align: 'center',
    width: 100,
    render(row) {
      return h(
        NTag,
        {
          type: row.is_published ? 'success' : 'warning',
        },
        {
          default: () => (row.is_published ? '已发布' : '未发布'),
        },
      );
    },
  },
  {
    title: '创建时间',
    key: 'created_at',
    width: 100,
    align: 'center',
    render(row) {
      // 格式化时间
      const date = new Date(row.created_at);
      const year = date.getFullYear(); // 获取年份
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份，并保证两位数
      const day = String(date.getDate()).padStart(2, '0'); // 获取日期，并保证两位数
      const formattedDate = `${year}-${month}-${day}`; // 自定义日期格式
      return h('span', formattedDate);
    },
  },
];
